<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>
            事件处理02
        </title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        
        <!-- VUE中支持的事件修饰符: 
            prevent: 默认会跳转到目标地址, 可以阻止默认事件的触发,
            stop: 阻止事件冒泡, 
            once: 只出发一次,
            capture: 使用事件的捕获模式
            self: 只有.event.target是当前操作的元素时才触发事件.
            passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕, 例如: 监听鼠标的滚轮事件, 触发回调函数, 回调执行完毕, 移动滚动条;  如果加了该修饰符, 就不需要等待回调函数执行完毕, 滚动条立即就会响应滚动.
            多个事件可以串起来, 例如: @click.prevent.once.self....
            
        
        -->

        <div id="root">
            <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示</a>
        </div>
        <script type="text/javascript">
            const vm = new Vue({
                el: "#root",
                data:{
                    name: "王五"
                },
                methods: {
                    showInfo(e){
                        alert("Hello, I am robot")
                    }
                },
            })
        </script>
    </body>
</html>